<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="添加/修改图片"
    :visible.sync="dialogFormVisible"
    width="600px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <!-- <el-form-item label="图片类型">
        <el-select
          :disabled="!!only"
          v-model="form.type"
          @change="handleTypeChange"
        >
          <el-option
            v-for="item of imageTypes"
            :label="item.title"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="默认图片" prop="url">
            <img-upload
              :path="imgPath"
              :base-api="baseApi"
              :src="form.url ? baseUrl + form.url : ''"
              @update="handleUpdate"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="dom && dom.type === 'button'" :span="12">
          <el-form-item label="聚焦图片" prop="focus_url">
            <img-upload
              :path="imgPath"
              :base-api="baseApi"
              :src="form.focus_url ? baseUrl + form.focus_url : ''"
              @update="form.focus_url = $event"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import ImgUpload from '@/components/ImgUpload'
  import mixin from '@/views/editor/mixin.js'
  // import { imageTypes } from '@/views/editor/config.js'

  export default {
    name: 'ImageEdit',
    components: {
      ImgUpload,
    },
    mixins: [mixin],
    props: {
      only: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        // imageTypes,
        root: {},
        form: {
          // type: 'link_image',
          url: '',
          focus_url: '',
        },
        elementSize: {
          width: 0,
          height: 0,
        },
        rules: {
          url: [{ required: true, trigger: 'blur', message: '请选择图片' }],
        },
        dialogFormVisible: false,
      }
    },
    computed: {
      dom() {
        return this.root.dom
      },
      baseApi() {
        return this.root.baseApi
      },
      baseUrl() {
        return this.root.baseUrl
      },
      imgPath() {
        return `topic/${this.root.topicKey}`
      },
    },
    created() {},
    methods: {
      handleUpdate(url) {
        if (url && this.dom.auto_size) {
          const img = new Image()
          img.onload = () => {
            this.$set(this.elementSize, 'width', img.width)
            this.$set(this.elementSize, 'height', img.height)
          }
          img.src = this.baseUrl + url
        }
        this.form.url = url
      },
      // handleTypeChange(type) {
      //   this.form.url = this.dom[type]
      // },
      showEdit() {
        // if (this.only) {
        //   this.form.type = this.only
        // }
        this.form.url = this.dom.link_image
        this.form.focus_url = this.dom.focus_image
        this.dialogFormVisible = true
        this.elementSize.width = this.dom.width
        this.elementSize.height = this.dom.height
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.$set(this.dom, 'width', this.elementSize.width)
            this.$set(this.dom, 'height', this.elementSize.height)
            this.$set(this.dom, 'link_image', this.form.url)
            if (this.dom.type === 'button') {
              this.$set(this.dom, 'focus_image', this.form.focus_url)
            }
            this.close()
          }
        })
      },
    },
  }
</script>
